<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>添加日志</title>
        <link rel="stylesheet" href="css/bootstrap.min.css"/>
        <link rel="stylesheet" href="css/style.css"/>
        <style type="text/css">
            .toolbar {
                border: 1px solid #ccc;
            }
            .text {
                border: 1px solid #ccc;
                height: 400px;
            }
        </style>
        <script src="js/jquery-3.4.1.min.js"></script>
        <script src="js/wangEditor.min.js"></script>

        <script>
            $(document).ready(function () {

                
                $("#btn_pub").click(function () {

                    $.ajax({
                        url: 'ands',
                        type: 'POST',
                        data: {diaryTitle: $("#title").val(), diaryContent: editor.txt.html()},
                        success: function () {
                            alert("发表成功！");
                        },
                        error: function () {
                            alert("error");
                        }
                    });
                });
            });
        </script>

    </head>
    <body>

        <div class="container">

            <h1 class="text-center text-primary">添加日志</h1>
            <hr>

            <div class="text-right">
                <button id="btn_pub" type="button" class="btn btn-sm btn-success">发表</button>
                
            </div>

            日志标题：<br><br>
            <input type="text" id="title" placeholder="输入日志标题" class="form-control">
            <br>

            <div id="div1" class="toolbar">
            </div>
            <div style="padding: 5px 0; color: #ccc">下方输入内容</div>
            <div id="div2" class="text"> <!--可使用 min-height 实现编辑区域自动增加高度-->
                <p>内容</p>
            </div>


            <script type="text/javascript">
                var E = window.wangEditor;
                var editor = new E('#div1', '#div2');  // 两个参数也可以传入 elem 对象，class 选择器

                editor.customConfig.uploadImgServer = 'uploadServlet';  // 上传图片到服务器
                editor.customConfig.uploadImgTimeout = 15000;

                editor.create();
            </script>


            <hr>
        </div>

    </body>
</html>

